import React, { useCallback } from 'react'
import { connect } from 'react-redux'
import { getActivePageOfActiveTabSelector, getCommonAllPagesSelector } from '../../selectors/baseSelector'
import { genSetActivePageOfActiveTab } from '../../actions/home'
import { SingleSelectableList } from '../layout/singleSelectableList'
import { ColHeader } from '../common/colHeader'

const maStateToProps = state => {
    return {
        activePage: getActivePageOfActiveTabSelector(state),
        allPages: getCommonAllPagesSelector(state),
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onSelectItem: page => dispatch(genSetActivePageOfActiveTab(page)),
    }
}

export const PageList = connect(maStateToProps, mapDispatchToProps)((props) => {
    const { activePage, onSelectItem, allPages } = props
    const getPageName = useCallback(page => page.name, [])
    const getPageTitle = useCallback(page => page.title, [])

    return (
        <React.Fragment>
            <ColHeader title='页面列表：' />
            <SingleSelectableList activeValue={activePage} dataSource={allPages}
                getItemValue={getPageName} getItemTitle={getPageName} getItemTitle2={getPageTitle}
                onSelectItem={onSelectItem} />
        </React.Fragment>)
})